<template>
	<view>
		<view class="contents">
			<view class="title">
				<view class="">

				</view>
				<text>基础信息</text>
			</view>
			<view class="specification">
				<view class="specif" v-for="(item,index) in setmeal" :key="index" :class="specifs==index?'speciback':''"
					@click="specif(index,item.pricek,item.you,item.serviceType)">
					<view class="v1">

						{{item.title}}
					</view>
					<view class="v2" v-if='index==0||index==1||index==2'>
						￥{{item.pricek}}/{{item.time}}分钟
					</view>
					<view class="v2" v-if="index==3">
						￥{{item.pricek}}/月
					</view>
					<view class="v2" v-if='index==4||index==5'>
						{{item.content}}
					</view>

					<view class="v3" v-if="item.discounts">
						{{item.discounts}}
					</view>
				</view>
			</view>
			<view class="reminder" v-show="specifs==0">
				该订单将以电话的形式进行，支付成功后，请尽快拨打咨询师电话
			</view>
			<view class="reminder" v-show="specifs==1">
				该订单将以电话的形式进行，支付成功后，请在预约时间拨打咨询师电话
			</view>
			<view class="reminder" v-show="specifs==2">
				该订单将以文字的形式进行，支付成功后，请及时与咨询师进行文字沟通（不可间断）
			</view>
			<view class="reminder" v-show="specifs==3||specifs==4">
				该订单将以电话的形式进行，支付成功后，请尽快拨打咨询师电话（有效期30天）
			</view>
			<view class="reminder" v-show="specifs==5">
				该订单将以电话的形式进行，支付成功后，请尽快拨打咨询师电话（有效期60天）
			</view>
			<view class="datum">
				<view class="datumbox">
					<view class="left">
						咨询师
					</view>
					<view class="right">
						{{user.real_name}}
					</view>
				</view>
				<view class="datumbox">
					<view class="left">
						开始时间
					</view>
					<view class="right" v-show="specifs!=1">
						立即咨询
					</view>
					<view v-show="specifs==1&&timedata==null" style="color: orangered;font-size: 28rpx;"
						@click="showyy2=true">
						请选择时间（必选）
					</view>
					<view v-show="specifs==1&&timedata!=null" style="font-size: 28rpx;" @click="showyy2=true">
						{{timedata}}
					</view>
				</view>
				<view class="consult" v-if="specifs==0||specifs==1||specifs==2||specifs==3"
					:class="specifs==3?'consults':''">
					<view class="left">
						咨询时长
					</view>
					<view class="" v-if="specifs==3">
						<u-number-box v-model="value" :min="720" button-size="20" step="60" @change="valChange">
						</u-number-box>
					</view>
					<view class="right" v-else>
						<view class="duration" v-for="(item,indes) in duration" :key="indes"
							:class="dur==indes?'dura':''" @click="dura(indes)">
							{{item.time}}分钟
							<view class="guanggao" v-if="item.discounts">
								{{item.discounts}}
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="safeguard">
				<view class="discountCoupon" v-if="specifs==0||specifs==1||specifs==2">
					<view class="left">
						优惠券
					</view>
					<!-- <view class="price" @click="showroll=true">
                        -￥0.00
                    </view> -->
					<view class="price2">
						暂无可用
					</view>
				</view>
				<view class="Saf">
					<view class="left">
						服务保障
					</view>
					<view class="right">
						服务不满意全额退款
					</view>
				</view>
			</view>
			<view class="genre">
				<view class="titgen">
					咨询类型
				</view>
				<view class="genrebox">
					<view class="gen" v-for="(item,index) in genre" :class="genr==index?'gen2':''"
						@click="genres(index)" :key="index">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="agreement">
			支付即表示同意《心灵密友心理咨询服务协议)
		</view>
		<view class="liubai">

		</view>
		<view class="bottoms">
			<view class="left">
				<view class="discounts" v-if="you!=0">
					已优惠{{you}}
				</view>
				<view class="total">
					合计：<text>￥{{pricek}}</text>
				</view>
			</view>
			<view class="right" @click="wxzf">
				微信支付
			</view>
		</view>


		<u-popup :show="showyy" @close="close" @open="open" :round="10" :closeable='true'>
			<view style="text-align: center;padding: 40rpx 0 20rpx;">
				预约咨询师
			</view>
			<times @select="getTime" ref="refz" @llonad='llonad'></times>
			<view style="width: 92vw;margin: 0 auto;">

				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view class="titl2">
							<view class="titl2zz">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558218038097925100.png"
									class="image_55" />上午
							</view>
							<view class="shijian" v-for="(i,index) in time" :key="index"
								:class="[(on==index?'lan2':''),(!i.usable?'lan3':'')]"
								@click="advisory(0,index,i.startTime,i.endTime,i.usable)">
								{{i.startTime}}-{{i.endTime}}
							</view>
						</view>
						<view class="titl2">
							<view class="titl2zz">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558218038091106948.png"
									class="image_55" />下午
							</view>
							<view class="shijian" v-for="(i,index) in time1" :key="index"
								:class="[(on1==index?'lan2':''),(!i.usable?'lan3':'')]"
								@click="advisory(1,index,i.startTime,i.endTime,i.usable)">
								{{i.startTime}}-{{i.endTime}}
							</view>
						</view>

						<view class="titl2">
							<view class="titl2zz">
								<image
									src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558218038096713968.png"
									class="image_55" />晚上
							</view>
							<view class="shijian" v-for="(i,index) in time2" :key="index"
								:class="[(on2==index?'lan2':''),(!i.usable?'lan3':'')]"
								@click="advisory(2,index,i.startTime,i.endTime,i.usable)">
								{{i.startTime}}-{{i.endTime}}
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="but" @click="subscribe()" :class="but?'but2':''">
					确认预约
				</view>
			</view>
		</u-popup>
		<u-popup :show="showroll" @close="close" @open="open" :round="10" :closeable='true'>
			<view class="roll">
				<view class="titroll">
					可用优惠券
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;">
					<view class="conroll">
						<radio-group @change="radioChange">
							<view class="list-item" :key="i" v-for="(item, i) in roll">
								<view class="list-item1">
									<view class="flex-row">
										<text class="text_8">优惠券</text>
										<!-- <view class="flex-col text-wrapper"><text class="text_10">新人专属</text></view> -->
									</view>
									<view class="flex-col group_4">
										<text class="text_12">八折优惠券</text>
										<text class="text_12">3日内有效</text>
										<text class="text_12">适用满59.9元立即疏解</text>
										<!-- <text class="text_12"></text> -->
									</view>
								</view>
								<view class="">
									<radio :value="i" :checked="index === current" color="#1989E1" />
								</view>
							</view>
						</radio-group>
					</view>
				</scroll-view>

				<view class="but but2" @click="subs()">
					确认
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showyy2" v-model="value1" :minDate="timestamp" :maxDate="timestamps" mode="datetime"
			@confirm='confirm' @cancel='cancel'></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getAskTypeList,
		serviceList
	} from '../../api/index.js'
	import {
		getOrderAdd
	} from '../../api/order.js'
	import {
		miniAppPay
	} from '../../api/pay.js'
	import times from '@/components/pretty-times/pretty-times.vue'
	export default {
		components: {
			times
		},
		data() {
			return {
				value1: Number(new Date()),
				showyy2: false,
				current: 0,
				roll: [1, 1, 1],
				showroll: false, //优惠券
				showyy: false, //预约弹出层
				pricek: 0, //总价格
				value: 720,
				specifs: 0,
				setmeal: [{
						title: '立即咨询',
						pricek: 89.9,
						time: 15,
						you: 0,
						serviceType: 0
					},
					{
						title: '预约咨询',
						pricek: 89.9,
						time: 15,
						you: 0,
						serviceType: 1

					},
					{
						title: '文字咨询',
						pricek: 89.9,
						time: 15,
						you: 0,
						serviceType: 2
					},
					{
						title: '包月套餐',
						pricek: 3452,
						discounts: '限时优惠',
						you: 0,
						serviceType: 3
					},
					{
						title: '180分钟折扣',
						content: '可多次拨打',
						discounts: '8.5折优惠',
						pricek: 8999,
						you: 0,
						serviceType: 4
					},
					{
						title: '300分钟折扣',
						content: '可多次拨打',
						discounts: '8折优惠',
						pricek: 8999,
						you: 0,
						serviceType: 4
					}
				],
				dur: 0,
				duration: [ //分钟
					{
						time: 15,
						pricek: 89.9
					},
					{
						time: 30,
						discounts: '最多人选',
						pricek: 100
					},
					{
						time: 45,
						pricek: 200
					},
					{
						time: 60,
						discounts: '最多人选',
						pricek: 359.6
					}
				],
				genr: 0,
				genre: [ //咨询类型

				],
				time: [{
						startTime: '08:00',
						endTime: '08:30',
						usable: true
					},


					{
						startTime: '08:30',
						endTime: '09:00',
						usable: true
					},


					{
						startTime: '09:00',
						endTime: '9:30',
						usable: true
					},


					{
						startTime: '09:30',
						endTime: '10:00',
						usable: true
					},



					{
						startTime: '10:00',
						endTime: '10:30',
						usable: true
					},


					{
						startTime: '10:30',
						endTime: '11:00',
						usable: true
					},


					{
						startTime: '11:00',
						endTime: '11:30',
						usable: true
					},


				],
				time1: [

					{
						startTime: '13:00',
						endTime: '13:30',
						usable: true
					},
					{
						startTime: '13:30',
						endTime: '14:00',
						usable: true
					},
					{
						startTime: '14:00',
						endTime: '14:30',
						usable: true
					},
					{
						startTime: '14:30',
						endTime: '15:00',
						usable: true
					},
					{
						startTime: '15:00',
						endTime: '15:30',
						usable: true
					},
					{
						startTime: '15:30',
						endTime: '16:00',
						usable: true
					},
					{
						startTime: '16:00',
						endTime: '16:30',
						usable: true
					},

				],
				time2: [

					{
						startTime: '17:00',
						endTime: '17:30',
						usable: true
					},
					{
						startTime: '17:30',
						endTime: '18:00',
						usable: true
					},
					{
						startTime: '18:00',
						endTime: '18:30',
						usable: true
					},
					{
						startTime: '19:00',
						endTime: '19:30',
						usable: true
					},
					{
						startTime: '19:30',
						endTime: '20:00',
						usable: true
					},
					{
						startTime: '20:00',
						endTime: '20:30',
						usable: true
					},
					{
						startTime: '20:30',
						endTime: '21:00',
						usable: true,
					},
					{
						startTime: '21:00',
						endTime: '21:30',
						usable: true
					},
					{
						startTime: '21:30',
						endTime: '22:00',
						usable: true
					},
					{
						startTime: '22:00',
						endTime: '23:30',
						usable: true
					},
					{
						startTime: '23:30',
						endTime: '24:00',
						usable: true
					},
				],
				on: -1,
				on1: -1,
				on2: -1,
				but: false, //选中状态
				sky: '', //选中日期
				endTime: '', //选中结束日期
				startTime: '', //选中开始日期
				info: {},
				user: {},
				you: 0,
				type: 0,
				timeSize: 15,
				askType: 0,
				timestamp: 0,
				timestamps: 0,
				timedata: null


			};
		},
		onLoad(option) {
			this.timestamp = Math.round(new Date())
			this.timestamps = Math.round(new Date()) + 86400000
			console.log(this.timestamp, this.timestamps);
			this.info = JSON.parse(option.item)
			this.pricek = this.duration[0].pricek //默认15分钟价格
			if( this.info.list.length > 0){
				this.genre = this.info.list
				this.askType = this.genre[0].id
			}
			let data = {
				id: this.info.id
			}
			//查询咨询服务类型列表
			serviceList(data).then(res => {
				this.user = res.data
				this.setmeal[0].pricek = res.data.price
				this.setmeal[0].time = res.data.ask_time
				this.setmeal[1].time = res.data.ask_time
				this.setmeal[1].time = res.data.ask_time * 2
				this.setmeal[1].pricek = res.data.price * 2
				this.setmeal[2].time = res.data.ask_time
				this.setmeal[3].pricek = res.data.name
				let timea = this.value / res.data.ask_time
				let moneyas = timea * res.data.price
				this.setmeal[3].you = parseFloat(moneyas - parseFloat(moneyas * 0.8).toFixed(1)).toFixed(1)
				let time = 180 / res.data.ask_time
				let money = time * res.data.price
				this.setmeal[4].pricek = parseFloat(money * 0.85).toFixed(1)
				this.setmeal[4].you = parseFloat(money - this.setmeal[4].pricek).toFixed(1)
				let times = 300 / res.data.ask_time
				let moneys = times * res.data.price
				this.setmeal[5].pricek = parseFloat(moneys * 0.8).toFixed(1)
				this.setmeal[5].you = parseFloat(moneys - this.setmeal[5].pricek).toFixed(1)
				for (var i = 0; i < this.duration.length; i++) {
					if (i != 0) {
						this.duration[i].pricek = parseFloat(res.data.price * (i + 1)).toFixed(1)
					} else {
						this.duration[i].pricek = res.data.price
					}

				}

			})
		},
		methods: {
			cancel() {
				this.showyy2 = false
			},
			confirm(e) {
				this.showyy2 = false
				this.timestampToTime(e.value)

			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = date.getDate() + ' ';
				let h = date.getHours() + ':';
				let m = date.getMinutes() + ':';
				let s = date.getSeconds();
				this.timedata = Y + M + D + h + m + s;
			},
			wxzf() {

				let data = {
					adviserId: this.info.id, //咨询师傅id
					serviceType: this.type, //咨询类型
					isCoupon: 0, //是否使用优惠券 暂时写死
					price: this.pricek, //订单金额
					payType: 1, //支付方式微信支付
					orderCategory: 1, //订单类型咨询订单
					actualPrice: this.pricek, //实付金额
					askType: this.askType, //咨询类型
					timeSize: this.timeSize ,//咨询时长
					openId:this.$store.state.userInfo.wxInfo.openId //唯一id
				}
				if (this.type == 1) { //预约咨询
					if (this.timedata != null) {
						data.appointmentTime = this.timedata
					} else {
						uni.showToast({
							title: '请选择预约时间',
							icon: 'none'
						})
						return
					}
				}
				miniAppPay(data).then(ress => {
					uni.requestPayment({
						timeStamp: ress.data.timeStamp,
						nonceStr: ress.data.nonceStr,
						package: ress.data.package,
						signType: ress.data.signType,
						paySign: ress.data.sign,
						success: function(res) {
							uni.showToast({
								title: '支付成功'
							})
							//跳转订单详情 关闭所有页面跳转
							uni.redirectTo({
								url: '/pages/myorder/orderDetails?id=' + ress.data.orderNo
							});
						},
						// 参数有问题则抛出错误
						fail: function(err) {
							//跳转订单详情 关闭所有页面跳转
							uni.redirectTo({
								url: '/pages/myorder/orderDetails?id=' + ress.data.orderNo
							});
							uni.showToast({
								title: '支付失败'
							})
						},
					})
				})
				// //创建订单
				// getOrderAdd(data).then(res=>{
				// 	console.log(res)
				// })
			},
			valChange(e) {
				let timea = (e.value - this.value) / this.user.ask_time
				let moneyas = timea * this.user.price
				console.log(moneyas)
				console.log(timea)
				let you = parseFloat(moneyas - moneyas * 0.8).toFixed(1)
				this.you = parseFloat(this.you) + parseFloat(you)
				this.pricek = parseFloat(this.pricek) + parseFloat(moneyas * 0.8)
				this.you = parseFloat(this.you).toFixed(1)
				this.pricek = parseFloat(this.pricek).toFixed(1)

			},
			radioChange: function(evt) {
				console.log(evt);
			},
			specif(index, pricek, you, type) { //选套餐 
				this.specifs = index
				this.dur = 0 //时间恢复默认选项
				this.you = you
				this.pricek = pricek //默认价格
				this.type = type
			},
			dura(indes) { //选时间
				this.dur = indes
				this.pricek = this.duration[indes].pricek //对应时间对应价格
				this.timeSize = this.duration[indes].time
			},
			genres(index) { //选类型
				this.genr = index
				this.askType = this.genre[index].id
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showyy = false
				this.showroll = false
			},
			llonad(e) {
				this.sky = e
			},
			getTime(e, index) {
				console.log(e, index)
				this.on = -1
				this.on1 = -1
				this.on2 = -1
				this.sky = e
				this.but = false
				for (let i = 0; i < this.time.length; i++) { //初始化每日预约时间
					this.time[i].usable = true
				}
				for (let i = 0; i < this.time1.length; i++) { //初始化每日预约时间
					this.time2[i].usable = true
				}
				for (let i = 0; i < this.time2.length; i++) { //初始化每日预约时间
					this.time2[i].usable = true
				}
				// let timeA=[]
				// for(let i=0 ;i<this.timeAppointment.length;i++){     //获得当日被预约的事件段
				//     if(this.timeAppointment[i].timeAppointment!=null){
				//         if(this.sky==this.timeAppointment[i].timeAppointment[0]){
				//             timeA.push(this.timeAppointment[i].timeAppointment)
				//         }
				//     }
				// }
				// console.log(timeA);

				// for(let i=0;i<this.time.length;i++){ //当日被预约的事件段禁用
				//     // this.time[0].endTime
				//     for(let k=0;k<timeA.length;k++){
				//         if(this.time[i].endTime==timeA[k][1]){
				//             this.time[i].usable=false
				//         }
				//     }
				// }
				// for(let i=0;i<this.time2.length;i++){ //当日被预约的事件段禁用
				//     // this.time[0].endTime
				//     for(let k=0;k<timeA.length;k++){
				//         if(this.time2[i].endTime==timeA[k][1]){
				//             this.time2[i].usable=false
				//         }
				//     }
				// }

				if (index == 0) {
					let date1 = new Date();
					let hours = date1.getHours();
					let minutes = date1.getMinutes();
					let seconds = date1.getSeconds();
					let timeB = hours * 3600 + minutes * 60 + seconds
					console.log(timeB);
					for (let i = 0; i < this.time.length; i++) { //禁用当日已过时间段
						let startTime = this.time[i].startTime.split(":")
						let startTimenum = Number(startTime[0]) * 3600 + Number(startTime[1]) * 60
						if (startTimenum < timeB) {
							this.time[i].usable = false
						}
					}
					for (let i = 0; i < this.time1.length; i++) { //禁用当日已过时间段
						let startTime = this.time1[i].startTime.split(":")
						let startTimenum = Number(startTime[0]) * 3600 + Number(startTime[1]) * 60
						if (startTimenum < timeB) {
							this.time1[i].usable = false
						}
					}
					for (let i = 0; i < this.time2.length; i++) { //禁用当日已过时间段
						let startTime = this.time2[i].startTime.split(":")
						let startTimenum = Number(startTime[0]) * 3600 + Number(startTime[1]) * 60
						if (startTimenum < timeB) {
							this.time2[i].usable = false
						}
					}
				}
			},
			advisory(a, index, startTime, endTime, usable) {

				if (usable) {
					if (a == 0) {
						this.on = index
						this.on1 = -1
						this.on2 = -1
					} else if (a == 1) {
						this.on = -1
						this.on1 = index
						this.on2 = -1
					} else {
						this.on = -1
						this.on1 = -1
						this.on2 = index
					}
					this.endTime = endTime
					this.startTime = startTime
					this.but = true
				} else {
					uni.showToast({
						title: '此时间段已被预约',
						icon: 'none'
					})
				}
			},
			subscribe() {
				console.log(this.sky, this.startTime, this.startTime);
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss">
	.contents {
		width: 92vw;
		margin: 0 auto;

		.title {
			margin: 30rpx 0;
			display: flex;
			align-items: center;

			view {
				width: 10rpx;
				height: 30rpx;
				background-image: linear-gradient(#1989E1, #fff);
				margin-right: 5rpx;
			}

			text {
				color: #333;
				font-size: 30rpx;
			}
		}

		.specification {
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.specif {
				margin-top: 20rpx;
				border-radius: 15rpx;
				width: 216rpx;
				padding: 30rpx 0;
				background-color: #fff;
				font-size: 26rpx;
				color: #666;
				position: relative;

				.v1,
				.v2 {
					text-align: center;
					line-height: 50rpx;
				}

				.v3 {
					position: absolute;
					left: 50%;
					top: 0;
					width: 140rpx;
					transform: translate(-50%, 0);
					background-color: #FF1A00;
					color: #fff;
					text-align: center;
					font-size: 18rpx;
					border-radius: 0 0 10rpx 10rpx;
					padding: 5rpx 0;
				}

			}

			.speciback {
				background-image: linear-gradient(to right, #6CBEFF, #1989E1);
				color: #fff;
			}
		}

		.reminder {
			padding: 20rpx 40rpx;
			background-color: #F7EAE7;
			color: #999999;
			font-size: 22rpx;
			border-radius: 15rpx;
		}

		.datum {
			margin-top: 20rpx;
			padding: 10rpx 25rpx;
			background-color: #fff;
			border-radius: 15rpx;

			.datumbox {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					color: #333;
					font-size: 30rpx;
				}

				.right {
					color: #999;
					font-size: 28rpx;
				}
			}

			.consult {
				.left {
					color: #333;
					font-size: 30rpx;
					padding: 30rpx 0;
				}

				.right {
					padding: 20rpx 0 30rpx;
					display: flex;
					justify-content: space-between;

					.duration {
						position: relative;
						background-color: #F7F8FC;
						padding: 5rpx 15rpx;
						color: #666;
						font-size: 26rpx;
						border-radius: 10rpx;

						.guanggao {
							position: absolute;
							left: 30rpx;
							top: -26rpx;
							background-color: #FF1A00;
							border-radius: 15rpx 15rpx 15rpx 0;
							color: #fff;
							font-size: 18rpx;
							width: 110rpx;
							text-align: center;
							padding: 3rpx 0;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;

						}
					}

					.dura {
						background-image: linear-gradient(to right, #6CBEFF, #1989E1);
						color: #fff;
					}

				}
			}

			.consults {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.safeguard {
			margin: 30rpx 0;
			padding: 0 25rpx;
			background-color: #fff;
			border-radius: 15rpx;

			.discountCoupon {
				padding: 30rpx 0 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 30rpx;
					color: #333;
				}

				.price {
					color: #FF1A00;
					font-size: 30rpx;
				}

				.price2 {
					color: #999;
					font-size: 30rpx;
				}
			}

			.Saf {
				padding: 30rpx 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 30rpx;
					color: #333;
				}

				.right {
					color: #666;
					font-size: 22rpx;
				}
			}
		}

		.genre {
			padding: 0 25rpx 30rpx;
			background-color: #fff;
			border-radius: 15rpx;

			.titgen {
				font-size: 30rpx;
				color: #333;
				padding: 30rpx 0 10rpx;
			}

			.genrebox {
				display: flex;
				flex-wrap: wrap;

				.gen {
					width: 200rpx;
					line-height: 80rpx;
					background-color: #F7F8FC;
					color: #666;
					text-align: center;
					margin-right: 15rpx;
					margin-top: 20rpx;
					border-radius: 10rpx;
				}

				.gen2 {
					background-image: linear-gradient(to right, #6CBEFF, #1989E1);
					color: #fff;
				}
			}
		}
	}

	.agreement {
		font-size: 22rpx;
		color: #1989E1;
		text-align: center;
		padding: 50rpx 0;
	}

	.liubai {
		height: 150rpx;
	}

	.bottoms {
		width: 100vw;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding-bottom: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;

		.left {
			width: 60vw;
			line-height: 100rpx;
			display: flex;

			.discounts {
				font-size: 22rpx;
				color: #999;
				margin: 0 30rpx;
			}

			.total {
				font-size: 32rpx;
				color: #999;

				text {
					color: #FF1A00;
				}
			}
		}

		.right {
			width: 40vw;
			line-height: 100rpx;
			background-color: #2691E6;
			text-align: center;
			color: #fff;
		}
	}

	.titl2 {
		width: 32%;

		.titl2zz {
			text-align: center;
			font-size: 24rpx;
			color: #67697F;
		}

		.image_55 {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}

		.image_552 {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}

		.shijian {
			// width: 29%;
			text-align: center;
			font-size: 24rpx;
			border-radius: 50rpx;
			background-color: #E8EAF8;
			color: #333;
			line-height: 56rpx;
			margin: 20rpx 2.1% 0;
		}

		.lan2 {
			background-color: #6D79FE;
			color: #fff
		}

		.lan3 {
			color: #999
		}
	}

	.but {
		width: 92vw;
		margin: 20rpx auto;
		background-color: #C6C9DA;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 100rpx;
	}

	.but2 {
		background-color: #1989E1;
	}

	.titroll {
		text-align: center;
		padding: 30rpx 0;
		font-size: 30rpx;
		color: #333;
	}

	.conroll {
		width: 92vw;
		margin: 0 auto;
	}

	.list-item {
		padding: 1.25rem 0.94rem 1.06rem 1.06rem;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558132697497859310.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-item1 {
		display: flex;
		align-items: center;
	}

	.group_2 {
		margin-top: 0.63rem;
		position: relative;
	}

	.text_4 {
		margin-right: 0.25rem;
		color: #fea14a;
		font-size: 1.91rem;
		font-family: SourceHanSansCN;
		font-weight: 700;
		line-height: 1.47rem;
		text-transform: uppercase;
	}

	.text_6 {
		color: #fea14a;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.53rem;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.group_4 {
		margin-left: 50rpx;
		align-self: center;
	}

	.text_12 {
		margin: 10rpx 0;
		align-self: flex-start;
		color: #957f59;
		font-size: 0.63rem;
		font-family: SourceHanSansCN;
		line-height: 0.59rem;
	}

	.text_8 {
		margin-bottom: 0.094rem;
		color: #957f59;
		font-size: 0.94rem;
		font-family: SourceHanSansCN;
		font-weight: 500;
		line-height: 0.81rem;
	}
</style>
